<template>
  <view class="wrapper">
    <view class="content">
      <u-cell-group>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="w-100 c-99"> 编号: </view>
            <view class="flex-1">
              <u--input v-model="listData.code" placeholder="请输入编号" border="none"></u--input>
            </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="w-100 c-99"> 名称: </view>
            <view class="flex-1">
              <u--input v-model="listData.name" placeholder="请输入名称" border="none"></u--input>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex" @click="fabricYarnShows = true">
            <view class="w-150 c-99"> 布匹/纱线: </view>
            <view class="flex-1">
              {{ listData.typeName }}
            </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="w-100 c-99"> 欠款: </view>
            <view class="flex-1">
              <u--input type="number" v-model="listData.originDebt" placeholder="请输入欠款" border="none"></u--input>
            </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex"
            @click="btnSelectGoods('/pages/application/pages/personnel/supplier/supplier-details/info/components/category')">
            <view class="w-100 c-99"> 分类: </view>
            <view class="flex-1">
              {{ listData.catName }}
            </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex" @click="storeShows = true">
            <view class="w-100 c-99"> 门店: </view>
            <view class="flex-1">
              {{ listData.shopName }}
            </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex"
            @click="btnSelectGoods('/pages/application/pages/personnel/components/payment-method')">
            <view class="w-150 c-99"> 结款方式: </view>
            <view class="flex-1">
              {{ listData.settlementTypeName }}
            </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="w-150 c-99"> 是否启用: </view>
            <view class="flex-1">
              <u-switch v-model="listData.isEnable"></u-switch>
            </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="w-150 c-99"> 备注: </view>
            <view class="flex-1">
              <u--input v-model="listData.remarks" placeholder="请输入内容" border="none"></u--input>
            </view>
          </view>
        </u-cell>

      </u-cell-group>
    </view>
    <!-- 门店 -->
    <cxPopupNotification
      :type="listData.shopId"
      :clothArray="weightColumns"
      :show="storeShows"
      @onLikeClose="(() =>{storeShows = false})"
      @onCheck="
        (e) => {
          (listData.shopName = e.label),
            (listData.shopId = e.value),
            (storeShows = false);
        }
      "
    >
    </cxPopupNotification>
    <!-- 布匹/纱线 -->
     <cxPopupNotification
      :type="listData.type"
      :clothArray="orgTypeOptionColumns"
      :show="fabricYarnShows"
      @onLikeClose="(() =>{storeShows = false})"
      @onCheck="
        (e) => {
          (listData.typeName = e.label),
            (listData.type = e.value),
            (fabricYarnShows = false);
        }
      "
    >
    </cxPopupNotification>   
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
// import cxFabricYarn from "@/components/cx-fabric-yarn/cx-fabric-yarn.vue";
import { getVoDataById } from "@/apis/bill/information/supplier";
import cxPopupNotification from "@/components/cx-popup-notification/cx-popup-notification";
import {
  getMenDianData,
  getKeHuTypeData,
} from "@/apis/bill/information/custom";
export default {
  components: {
    clIcon,
    // cxFabricYarn,
    cxPopupNotification
  },
  data() {
    return {
      fabricYarnShows: false,
      storeShows: false,
      weightColumns: [],
      orgTypeOptionColumns:[],
      config: {
        title: "产品",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      listData: {
        // "code": "", // 编号
        // "name": "",//名称
        // "type": 1,  // 布匹id
        // "typeName": "布匹", // 布匹name
        // "catId": "", // 分类
        // "catName": null,  // 分类name
        // "shopId": "1597506542394015744",  //门店id
        // "shopName": "总店",// 门店name
        // "settlementTypeId": "", // 结款方式
        // "settlementTypeName": "", // 结款name
        // "isEnable": true, // 是否启用
        // "remarks": "", // 备注
        // "originDebt": null, // 欠款
        // "labelList": null, //标签
      },
    };
  },
  computed: {},
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  computed: {},
  watch: {
    data(n, o) {
      this.listData = n
    }
  },
  created() {
    this.getMenDianDatas();
    this.getOrgTypeOptionsDatas();
    uni.$on('category', data => {
      this.listData.catId = data.id
      this.listData.catName = data.name
    })
    uni.$on('on-payment-method', data => {
      this.listData.settlementTypeId = data.id
      this.listData.settlementTypeName = data.name
    })
  },
  onReady() { },
  methods: {
    // 获取纱线
    getOrgTypeOptionsDatas() {
      getKeHuTypeData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.orgTypeOptionColumns = data;
      });
    },
    // 获取门店
    getMenDianDatas() {
      getMenDianData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.weightColumns = data;
      });
    },
    btnSelectGoods(url) {
      if (!url) return;
      this.$Router.push({
        path: url,
      });
    },
  },
  beforeDestroy() {
    uni.$off("category")
    uni.$off("on-payment-method")
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  // height: 100%;
  background-color: #fff;

  .content {
    flex: 1;
    overflow-y: scroll;
  }

  .btns {}
}
</style>